import './App.css';
import '@nutui/nutui-react/dist/style.css';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { Suspense } from 'react';
import { ConfigProvider } from '@nutui/nutui-react';
import enUS from '@nutui/nutui-react/dist/es/locales/en-US';
import { Provider } from 'react-redux';
import store from '@/store';

import Index from './pages/Index';
import Layout from './views/layout/Layout';
import Login from './views/login';
import Orders from './views/orders';
import OrderDetail from './views/orders/detail';
import Settings from './views/settings';
import Products from './views/products';
import RouteGuard from './components/RouteGuard';
import ProtectedRoute from './components/ProtectedRoute';

const App = () => {
    const darkTheme = {
        nutuiColorPrimaryIcon: 'rgb(36, 195, 115)',
        nutuiColorPrimaryStop1: 'rgb(36, 195, 115)',
        nutuiColorPrimaryStop2: 'rgb(36, 195, 115)',
        '--nutui-tabs-titles-item-active-color': 'rgb(36, 195, 115)',
        '--nutui-tabbar-active-color': 'rgb(36, 195, 115)',
    };

    return (
        <Provider store={store}>
            <ConfigProvider locale={enUS} theme={darkTheme}>
                <Router basename="shopapp">
                    <RouteGuard>
                        <Suspense fallback={<div>Loading...</div>}>
                            <Routes>
                                {/* 公开路由 - 不需要登录 */}
                                <Route path="/login" element={<Login />} />

                                {/* 受保护路由 - 需要登录 */}
                                <Route
                                    path="/"
                                    element={
                                        <ProtectedRoute>
                                            <Index />
                                        </ProtectedRoute>
                                    }
                                />
                                <Route
                                    path="/home"
                                    element={
                                        <ProtectedRoute>
                                            <Layout />
                                        </ProtectedRoute>
                                    }
                                />
                                <Route
                                    path="/products"
                                    element={
                                        <ProtectedRoute>
                                            <Layout />
                                        </ProtectedRoute>
                                    }
                                />
                                <Route
                                    path="/experts"
                                    element={
                                        <ProtectedRoute>
                                            <Layout />
                                        </ProtectedRoute>
                                    }
                                />
                                <Route
                                    path="/cart"
                                    element={
                                        <ProtectedRoute>
                                            <Layout />
                                        </ProtectedRoute>
                                    }
                                />
                                <Route
                                    path="/user"
                                    element={
                                        <ProtectedRoute>
                                            <Layout />
                                        </ProtectedRoute>
                                    }
                                />

                                {/* 订单相关路由 */}
                                <Route
                                    path="/orders"
                                    element={
                                        <ProtectedRoute>
                                            <Orders />
                                        </ProtectedRoute>
                                    }
                                />
                                <Route
                                    path="/orders/detail/:orderNo"
                                    element={
                                        <ProtectedRoute>
                                            <OrderDetail />
                                        </ProtectedRoute>
                                    }
                                />

                                {/* 设置页面 */}
                                <Route
                                    path="/settings"
                                    element={
                                        <ProtectedRoute>
                                            <Settings />
                                        </ProtectedRoute>
                                    }
                                />

                                {/* 商品列表页面 */}
                                <Route
                                    path="/products"
                                    element={
                                        <ProtectedRoute>
                                            <Products />
                                        </ProtectedRoute>
                                    }
                                />

                                {/* 404重定向 */}
                                <Route path="*" element={<Navigate to="/home" replace />} />
                            </Routes>
                        </Suspense>
                    </RouteGuard>
                </Router>
            </ConfigProvider>
        </Provider>
    );
};

export default App;
